<template>
	<div class="detail">
		<div class="shade"></div>
		<div class="popup">
			<div class="title justify-content-between">
				<span class="fs28 colorFFF">详情</span>
				<img src="../assets/images/icon-close.png" @click="cancel()">
			</div>
			<div class="lists" v-if="type == 1">
				<div class="list">
					<div class="key">测试项目：</div>
					<div class="val">{{data.testProject}}</div>
				</div>
				<div class="list">
					<div class="key">测试方法：</div>
					<div class="val">{{data.testMethod}}</div>
				</div>
				<div class="list">
					<div class="key">合格判据：</div>
					<div class="val">{{data.testJudge}}</div>
				</div>
			</div>
			<div class="lists" v-else-if="type == 2">
				<div class="list">
					<div class="key">试验项目：</div>
					<div class="val">{{data.expProject}}</div>
				</div>
				<div class="list">
					<div class="key">试验条件：</div>
					<div class="val">{{data.expCondition}}</div>
				</div>
				<div class="list">
					<div class="key">测试项目：</div>
					<div class="val">{{data.testProject}}</div>
				</div>
				<div class="list">
					<div class="key">测试方法：</div>
					<div class="val">{{data.testMethod}}</div>
				</div>
				<div class="list">
					<div class="key">合格判据：</div>
					<div class="val">{{data.testJudge}}</div>
				</div>
			</div>
			<div class="lists" v-else-if="type == 3">
				<div class="list">
					<div class="key">检查项目：</div>
					<div class="val">{{data.checkProject}}</div>
				</div>
				<div class="list">
					<div class="key">检查方法：</div>
					<div class="val">{{data.checkMethod}}</div>
				</div>
				<div class="list">
					<div class="key">合格判据：</div>
					<div class="val">{{data.testJudge}}</div>
				</div>
			</div>
			<div class="lists" v-else-if="type == 4">
				<div class="list">
					<div class="key">测试项目：</div>
					<div class="val">{{data.testProject}}</div>
				</div>
				<div class="list">
					<div class="key">测试方法：</div>
					<div class="val">{{data.testMethod}}</div>
				</div>
				<div class="list">
					<div class="key">合格判据：</div>
					<div class="val">{{data.testJudge}}</div>
				</div>
			</div>
			<div class="lists" v-else-if="type == 5">
				<div class="list">
					<div class="key">试验项目：</div>
					<div class="val">{{data.expProject}}</div>
				</div>
				<div class="list">
					<div class="key">试验条件：</div>
					<div class="val">{{data.expCondition}}</div>
				</div>
				<div class="list">
					<div class="key">测试项目：</div>
					<div class="val">{{data.testProject}}</div>
				</div>
				<div class="list">
					<div class="key">合格判据：</div>
					<div class="val">{{data.testJudge}}</div>
				</div>
			</div>
			<div class="lists" v-else-if="type == 6">
				<div class="list">
					<div class="key">检查项目：</div>
					<div class="val">{{data.checkProject}}</div>
				</div>
				<div class="list">
					<div class="key">检查方法：</div>
					<div class="val">{{data.checkMethod}}</div>
				</div>
				<div class="list">
					<div class="key">合格判据：</div>
					<div class="val">{{data.testJudge}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
    name: 'ListDetail',
    props: {
    	data: Object, //详情数据
    	type: Number //数据类型
    },
    data () {
        return {
            
        }
    },
    created() {
        
    },
    methods: {
        // 关闭弹窗
    	cancel() {
    		this.$emit('cancel');
    	}
    }
}
</script>

<style scoped lang='less'>
    @import url('../assets/css/public.css');
    .detail {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999;
    	.shade {width: 100%;height: 100%;background: rgba(0,0,0,.3);}
		.popup {width: 828rem;height: 499rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #FFF;box-shadow: 0 5rem 15rem 0 rgba(0, 21, 54, 0.25);
			.title {width: 100%;height: 58rem;background-color: #285FE3;padding: 0 23rem 0 28rem;
				img {width: 23rem;height: 23rem;cursor: pointer;}
			}
			.lists {height: 380rem;margin-top: 41rem;scrollbar-width: none;-ms-overflow-style: none;overflow-y: scroll;}
			.lists::-webkit-scrollbar {display: none;}
			.list {width: 100%;margin-top: 20rem;padding: 0 40rem;display: flex;
				.key {width: 120rem;font-size: 20rem;color: #161D2E;flex-shrink: 0;}
				.val {font-size: 18rem;color: #505971;padding-top: 3rem;word-break: break-all;}
			}
			.list:first-child {margin-top: 0;}
		}
    }
</style>